<script setup lang="ts">
  import { ref, defineProps, reactive, defineExpose } from "vue"
  import { createMessage } from '@/Public-UIlibrary/pb-message/method'
  import { getRecipePlanUpdate } from '@/api/Recipe.ts'
  import { createMsgBox } from "@/Public-UIlibrary/pb-message-box/method.ts"
  import { useRouter } from 'vue-router'
  import { getLevelEdit } from '@/api/Level'
  let emits = defineEmits('onConfirmModal')
  let loading = ref(false)
  const router = useRouter()
  const mealEditColumn = [{
    key: "dishName",
    width: 120,
    name: "菜肴名称 ",
  },
  {
    key: "dishTypeName",
    width: 120,
    name: "菜肴分类",
  },
  {
    slot: "dishCopies",
    name: "份数",
    width: 200,
  },
  {
    slot: "dishRoi",
    name: "投入产出比",
  },

  ]
  const mealDetailColumn = [{
    key: "dishName",
    width: 120,
    name: "菜肴名称 ",
  },
  {
    key: "dishCopies",
    name: "份数",
    align: 'right'
  },
  {
    key: "dishSellPrice",
    name: "售价(元)",
    align: 'right'
  },
  {
    key: "dishSellPriceTotal",
    name: "金额(元)",
    align: 'right'
  },
  {
    key: "dishWeight",
    name: "份重(熟kg)",
    align: 'right'
  },
  {
    key: "dishWeightTotal",
    name: "出品(kg)",
    align: 'right'
  },

  ]
  let showType = ref()
  const mealList = ref([])
  let editMealShow = ref(false)
  const onShow = (type, list) => {
    console.log(list);

    showType.value = type
    mealList.value = JSON.parse(JSON.stringify(list))
    console.log(mealList.value);
    editMealShow.value = true
  }
  const onConfirmFn = () => {
    console.log(mealList.value);

    getRecipePlanUpdateApi(mealList.value)
  }
  const getSummaries = () => {
    let total = 0
    console.log(mealList);

    mealList.value.dishList.forEach(element => {
      total += Number(element.dishCopies)
    });
    return ['合计', '', '', total, '']
  }
  // 关闭表单重置
  const cancelFn = () => {
  }
  // 编辑食谱
  const getRecipePlanUpdateApi = async (params) => {
    loading.value = true
    let res = await getRecipePlanUpdate(params)
    loading.value = false
    if (res.code == 2000) {
      if (res.data.warnList) {
        createMsgBox(
          '根据当前食增设定参数，无法满足选菜规则，请确认调整规则或者手动调整菜品',
          { cancelText: '调整参数', showTitleIcon: true, confirmText: '手动调整', title: '警告通知', titleType: 'warning', Width: 500, connectList: res.data.warnList, showTitleIcon: true, showIcon: false }).then(res => {
            if (!res) {
              router.push({ path: '/recipeSetting' })
            }
          })
      }
      else {
        createMessage({
          message: '修改成功'
        })
      }
      emits('onConfirmModal')

      editMealShow.value = false
    } else if (res.code == 5002) {
      console.log(res);
      createMsgBox(
        res.msg,
        { cancelText: '调整参数', showTitleIcon: true, confirmText: '手动调整', title: '错误通知', Width: 500, connectList: res.data, showTitleIcon: true, showIcon: false }).then(res => {
          if (!res) {
            router.push({ path: '/recipeSetting' })
          }
        })
    } else {
      // getCanteenDishPageApi()
    }
  }
  defineExpose({ onShow })
</script>

<template>
  <pb-popup :loading="loading" v-model="editMealShow" :title="`${showType}`" Width="860" @confirmFn="onConfirmFn"
    @cancelFn="cancelFn">
    <div style="height: 550px;">
      <div v-if="showType == '修改'">
        <pb-table :showSummary="showType == '修改'" :getSummaries="getSummaries" :tableData="mealList.dishList"
          style="border-radius: 4px" height="500px" :column="mealEditColumn">
          <template #dishCopies="{ row }">
            <div class="flex items-center">
              <pb-input v-model="row.dishCopies" :disabled="showType == '详情'" width="130px" height="30px"></pb-input>
            </div>
          </template>
          <template #dishRoi="{ row }">
            <div class="flex items-center">
              {{row.dishRoi}}%
            </div>
          </template>
        </pb-table>
        <div class="flex">
          <div v-for="it in mealEditColumn" class="totalItem"></div>
        </div>
      </div>
      <pb-table v-else :tableData="mealList.dishList" style="border-radius: 4px" height="500px"
        :column="mealDetailColumn">
        <template #dishCopies="{ row }">
          <div class="flex items-center">
            <pb-input v-model="row.dishCopies" :disabled="showType == '详情'" width="130px" height="30px"></pb-input>
          </div>
        </template>
        <template #dishRoi="{ row }">
          <div class="flex items-center">
            {{row.dishRoi}}%
          </div>
        </template>
      </pb-table>
      <div class="total"></div>
    </div>

  </pb-popup>
</template>

<style lang="scss" scoped>
  .total {
    height: 200px;
    background-color: var();
  }

  .totalItem {
    height: 54px;
  }
</style>
